import React, { Component } from 'react';
import {
	StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;
export class TabItem extends Component {
	constructor(props) {
		super(props);
	}

	_contrast = (year) => {
		let yearStr = new Date().getFullYear();  //今年
		let yearArr = null;
		let result = false;
		if (year) {
			yearArr = year.split('-');
			if (parseInt(yearStr) > parseInt(yearArr[0])) {
				result = true;
			}
		}
		return result;
	}

	render () {
		let { data, active, navData, callBack, tabIndex } = this.props;
		return (
			<View style={styles.listBox}>
				{
					data && data.map((item, index) => {
						console.log('item-000', item)
						let { bizMode, orderId, orderType, corpId, corpName } = item && item.list[0] || {};
						let sendData = {
							choice: { corpId, corpName },
							orderId,
							orderType,
							callBack: function () {
								callBack && callBack();
							}
						}
						let pageUrl = '';
						pageUrl = 'OrderDetailsPage';

						return (
							<View key={index} style={styles.listItem}>
								<View style={{ flexDirection: 'row' }}>
									<Text style={styles.itemTitle}>{item.title}</Text>
									{(item && item.list[0] && item.list[0].toCredit) ? <Text style={styles.info}>转授信</Text> : null}
								</View>

								<TouchableOpacity onPress={() => { if (item.title != 'ZYK') { navData.navigation.navigate(pageUrl, sendData) } }} style={styles.itemKe}>
									{
										item.list && item.list.map((items, index) => {
											return (
												<View key={index}>

													{!tabIndex ? (<View style={[styles.listout, (index < item.list.length - 1) ? styles.line : null]}>
														<View style={{ marginRight: 20 * scale }}>
															<Text style={styles.time}>{items.occurDate}</Text>
															<Text style={[styles.time, { color: '#ffc132', marginTop: 8 * scale }]}>(业务组织：{corpName || '--'})</Text>
														</View>
														<View style={(index < item.list.length - 1) ? styles.line2 : null}>
															<Text style={styles.money}>¥{MethodUtil.toThousands(items.occurAmount, 2)}</Text>
															{
																active ?
																	(item.title == 'ZYK') ? (this._contrast(items.occurDate) ? <Text style={[styles.money, styles.pt8, { color: 'red', fontSize: 12 * scale }]}>历史数据</Text> : null) : (<Text style={[styles.money, styles.pt8]}>(最后核销日{items.overdueDate})</Text>)
																	: null
															}
															{
																<Text style={[styles.money, styles.pt8, { flexDirection: 'row', width: 175 * scale }]}>
																	{items.staffName || '--'} | {items.teamName || '--'} | {items.organName || '--'}
																</Text>
															}
														</View>
													</View>) :
														(<View style={[styles.listout, (index < item.list.length - 1) ? styles.line : null, { justifyContent: 'space-between' }]}>
															<View style={[styles.flex2, { marginRight: 20 * scale }, (index < item.list.length - 1) ? styles.line2 : null]}>
																<View style={styles.timeBox}>
																	<Text style={styles.time2}>变更前总额</Text>
																	<Text>¥{MethodUtil.toThousands(items.orderAmt, 2)}</Text>
																</View>
																<Text style={[styles.time, styles.pt8, { color: '#ffc132' }]}>(业务组织：{corpName || '--'})</Text>
															</View>
															<View style={[styles.flex2, (index < item.list.length - 1) ? styles.line2 : null]}>
																<View >
																	<Text style={[styles.time2]}>变更中总额</Text>
																	<Text>¥{MethodUtil.toThousands(items.changedOrderAmt, 2)}</Text>
																</View>
																{
																	<Text style={[styles.money, styles.pt8, { flexDirection: 'row', width: 175 * scale }]}>
																		{items.staffName || '--'} | {items.teamName || '--'} | {items.organName || '--'}
																	</Text>
																}
															</View>
															<View style={styles.flex}>
																<View style={styles.row}>
																	{items.changedIncreaseOrderAmt > 0 ? <Image style={styles.rowImage} source={require('../../../../imgs/upDegreen.png')} /> : <Image style={styles.rowImage} source={require('../../../../imgs/downDegreen.png')} />}
																	<Text style={[styles.rowText, items.changedIncreaseOrderAmt > 0 ? null : styles.rowTextActive]}>{items.changedIncreaseOrderAmt || 0}</Text>
																</View>
															</View>

														</View>)}

												</View>
											)
										})
									}
								</TouchableOpacity>
							</View>
						)
					})
				}
			</View>
		)
	}
}
const styles = StyleSheet.create({
	tabBox: {
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
		paddingBottom: 15 * scale,
		height: '100%',
	},
	colorRed: {
		color: '#F66464',
		fontSize: 12 * scale,
		paddingTop: 12 * scale,
	},
	tabTitle: {
		fontSize: 12 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		paddingTop: 12 * scale,
		paddingBottom: 12 * scale
	},
	listBox: {

	},
	listItem: {
		paddingTop: 18 * scale
	},
	itemTitle: {
		fontSize: 13 * scale,
		color: '#404040',
		marginBottom: 10 * scale,
		fontWeight: 'bold',
	},
	itemKe: {
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		borderRadius: 10 * scale,
		backgroundColor: style.color.white,
	},
	time: {
		color: '#404040',
		fontSize: 12 * scale,
		width: 120 * scale,
		marginLeft: 15 * scale
	},
	timeBox: {
		marginLeft: 15 * scale
	},
	time2: {
		color: '#404040',
		fontSize: 12 * scale,
		width: 120 * scale,
		marginBottom: 3 * scale
	},
	money: {
		color: '#404040',
		fontSize: 12 * scale
	},
	pt8: {
		paddingTop: 8 * scale
	},
	line: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		marginBottom: 15 * scale,
	},
	line2: {
		marginBottom: 15 * scale,
	},
	oldDay: {
		color: '#D48400'
	},
	listout: {
		flexDirection: 'row',
		alignItems: 'flex-start',
	},
	pt5: {
		paddingTop: 5 * scale
	},
	row: {
		flexDirection: 'row',
		marginRight: 5 * scale
	},
	rowText: {
		color: '#E02020',
		fontSize: 12 * scale
	},
	rowTextActive: {
		color: style.color.button,
		fontSize: 12 * scale
	},
	rowImage: {
		width: 15 * scale,
		height: 10 * scale,
		marginTop: 2 * scale,
		marginLeft: -10 * scale
	},
	flex2: {
		flex: 2
	},
	flex: {
		flex: 1
	},
	info: {
		marginLeft: 5 * scale,
		height: 16 * scale,
		lineHeight: 16 * scale,
		paddingLeft: 6 * scale,
		paddingRight: 6 * scale,
		backgroundColor: '#F7B500',
		fontSize: 10 * scale,
		color: '#fff'
	}
})